<template>
  <!-- 首页主区域 -->
  <section class="home">
    <!-- 顶部欢迎语和副标题，增加 animate.css 动画类 -->
    <div class="hero animate__animated animate__fadeInDown">
      <h1>欢迎来到创新科技企业官网</h1>
      <p class="subtitle">专注于为企业提供高效、可靠的数字化解决方案</p>
    </div>
    <!-- 轮播图区域，移动端可滑动切换图片 -->
    <div class="carousel" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd">
      <div class="carousel-track" :style="trackStyle">
        <!-- 轮播图片加淡入过渡 -->
        <transition-group name="carousel-fade" tag="div" class="carousel-track">
          <div class="carousel-item" v-for="(img, idx) in images" :key="idx" :class="{active: idx===current}">
            <img v-if="idx===current" :src="img" alt="banner" />
          </div>
        </transition-group>
      </div>
      <!-- 轮播图下方的圆点指示器 -->
      <div class="carousel-dots">
        <span v-for="(img, idx) in images" :key="idx" :class="{active: idx===current}" @click="goTo(idx)"></span>
      </div>
    </div>
    <!-- 公司简介部分，淡入过渡 -->
    <transition name="fade">
      <div class="intro animate__animated animate__fadeInLeft" v-if="showIntro">
        <h2>公司简介</h2>
        <p>我们致力于为客户提供定制开发、数据可视化、技术咨询等一站式服务，助力企业数字化转型。</p>
      </div>
    </transition>
    <!-- 主要业务列表，淡入过渡 -->
    <transition name="fade">
      <div class="main-services animate__animated animate__fadeInUp" v-if="showServices">
        <h2>主要业务</h2>
        <ul>
          <li>定制软件开发</li>
          <li>数据可视化平台</li>
          <li>IT技术咨询</li>
        </ul>
      </div>
    </transition>
  </section>
</template>

<script setup>
// 引入 vue 的 ref 响应式 API
import { ref, computed, onMounted } from 'vue'
// 轮播图图片，可以替换为企业相关图片
const images = [
  'https://picsum.photos/id/1015/800/300',
  'https://picsum.photos/id/1016/800/300',
  'https://picsum.photos/id/1018/800/300'
]
// 当前显示的图片索引
const current = ref(0)
// 触摸起始点 X 坐标
let startX = 0
// 触摸滑动距离
let deltaX = 0
// 是否正在滑动
let isSwiping = false

// 控制简介和服务区淡入
const showIntro = ref(false)
const showServices = ref(false)
onMounted(() => {
  setTimeout(() => { showIntro.value = true }, 300)
  setTimeout(() => { showServices.value = true }, 700)
})

// 跳转到指定图片索引
function goTo(idx) {
  current.value = idx
}
// 触摸开始事件，记录起始 X 坐标
function onTouchStart(e) {
  isSwiping = true
  startX = e.touches[0].clientX
}
// 触摸移动事件，计算滑动距离
function onTouchMove(e) {
  if (!isSwiping) return
  deltaX = e.touches[0].clientX - startX
}
// 触摸结束事件，根据滑动距离判断是否切换图片
function onTouchEnd() {
  if (Math.abs(deltaX) > 50) {
    if (deltaX < 0 && current.value < images.length - 1) current.value++ // 向左滑动，下一张
    if (deltaX > 0 && current.value > 0) current.value-- // 向右滑动，上一张
  }
  isSwiping = false
  deltaX = 0
}
// 计算轮播图 track 的样式，实现图片切换动画
const trackStyle = computed(() => ({
  transform: `translateX(-${current.value * 100}%)`, // 根据当前索引平移
  transition: 'transform 0.4s' // 动画过渡
}))
</script>

<style scoped>
.home {
  max-width: 900px;
  margin: 0 auto;
  padding: 32px 16px;
}
.hero {
  text-align: center;
  margin-bottom: 2em;
}
.subtitle {
  color: #666;
  font-size: 1.2em;
}
.carousel {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  margin-bottom: 2em;
  background: #f6f8fa;
}
.carousel-track {
  display: flex;
  transition: transform 0.4s;
}
.carousel-item {
  min-width: 100%;
  user-select: none;
}
.carousel-item img {
  width: 100%;
  display: block;
  border-radius: 12px;
}
.carousel-dots {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}
.carousel-dots span {
  display: block;
  width: 10px;
  height: 10px;
  background: #ccc;
  border-radius: 50%;
  cursor: pointer;
}
.carousel-dots .active {
  background: var(--primary);
}
.intro, .main-services {
  margin-bottom: 2em;
}
.main-services ul {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  padding-left: 0;
  list-style: none;
}
.main-services li {
  background: var(--primary-light);
  color: var(--primary);
  border-radius: 8px;
  padding: 8px 20px;
  font-weight: 500;
}
.carousel-fade-enter-active, .carousel-fade-leave-active {
  transition: opacity 0.5s;
}
.carousel-fade-enter-from, .carousel-fade-leave-to {
  opacity: 0;
}
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.6s;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
@media (max-width: 700px) {
  .home { padding: 12px 2px; }
  .carousel-item img { height: 160px; object-fit: cover; }
  .main-services ul { flex-direction: column; gap: 10px; }
}
</style> 